<template>
    <div class="userlike-box">
        <div class="userlike-bg">
            <span class="guess-img">
                <i></i>
            </span>
            <ul class="userlike-ul" >
                <li class="userlike-li"
                v-for="item in this.guesslist"
                :key="item.commonId"
                v-on:click='todetail(item.commonId)'
                >
                    <div class=" userlike-img">
                        <a href="javascript:void(0)">
                        <img :src="item.imageSrc" alt="">
                        </a>
                    </div>
                    <div class=" userlike-info">
                        <ul >
                            <li>
                            <a href="javascript:void(0)">
                               <h3>
                                   <img src="https://api.10street.cn/wap/images/product/vipPrice1.png" alt="">
                                   {{item.goodsName}}
                               </h3> 
                            </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">
                                    <span class="userlike-price">
                                        ￥<em>{{item.appPrice0}}</em>
                                    </span>
                                    <span class="userlike-vip-price">
                                        会员价
                                        <i>￥
                                            <b >{{item.vipPrice}}
                                            </b>
                                        </i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                
            </ul>
        </div>
    </div>
</template>

<script>
import Axios from 'axios'
export default {
    methods: {
        todetail(commonId){
        this.$emit('commonId',commonId)
        }
    },
    data(){
        return{
            guess : [],
            guesslist : []
        }
    },
    
    created () {

        
        Axios({
            url : "/userlike",
            method : "post",
            headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
             }
        }).then((result) => {

         //console.log(result.data.datas)

        for(let items in result.data.datas ){
 
          this.guess.push(result.data.datas[items])
        }
      //  console.log(this.guess)

      for(let data in this.guess){
         // console.log(this.guess[data])
          for(let datas in this.guess[data] ){
            this.guesslist.push(this.guess[data][datas])
          }
         //
      }

        })
    }


}
</script>

<style lang = "stylus" scoped>
.userlike-box
  background #f5f5f5
  padding-bottom .55rem
  width 100%
  padding-top 0.1rem
    
  .guess-img 
    display  block
    width  100%
    height  0.4rem
    text-align  center
    i 
      display: inline-block;
      width: 2.05rem;
      background: url(https://api.10street.cn/wap/images/guess_like.png) no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      height: 0.28rem;
      margin: 0.066rem auto;
.userlike-ul
  display flex
  flex-wrap wrap
  justify-content space-between
  width 100%
  .userlike-li
    width 49.5% 
    background #fff 
    margin-bottom  0.03rem 
  .userlike-img
    img 
      width 100%
  .userlike-info
    width 100%
    padding-bottom  0.04rem
    padding-left 0.02rem
    li:nth-of-type(1)
      overflow  hidden
      img 
        width  0.14rem
        margin-right  0.02rem
      a 
        color  #232326
        height 0.19rem
        line-height 0.19rem
        display block
      h3 
        font-size 0.02rem
        font-weight 500
    li:nth-of-type(2)
      .userlike-price
        color #333
        display block
        font-size 0.12rem
       
      .userlike-vip-price
        display block
        line-height  0.19rem 
        font-size  0.11rem 
        color #8E8E92 
        width  100% 
        height  0.19rem 
        overflow  hidden 
        i 
          color  #ff4a42 
          b 
            font-size 0.15rem
      
</style>